
import React, { PureComponent } from 'react';
import { Table, Input, InputNumber, Popconfirm, Form, Button } from 'antd';
import { withRouter } from 'react-router';


const data = [];
for (let i = 0; i < 5; i++) {
    data.push({
        key: `${i}`,
        batchNo: `batchNo  ${i}`,
        model: `model  ${i}`,
        department: `department. ${i}`,
        assembleProcess: `assembleProcess. ${i}`,
        testMachineProcess: ``,
        qualityCheckProcess: ``,
    });
}
const data1 = [];
for (let i = 0; i < 5; i++) {
    data1.push({
        key: `${i}`,
        batchNo: `batchNo  ${i} + 1`,
        model: `model  ${i} + 1`,
        department: `department. ${i} + 1`,
        assembleProcess: `assembleProcess. ${i} + 1`,
        testMachineProcess: ``,
        qualityCheckProcess: ``,
    });
}

const EditableContext = React.createContext();
class EditableCell extends React.Component {
    getInput = () => {
        if (this.props.dataIndex === 'number') {
          return <InputNumber />;
        }
        return <Input />;
      };
    renderCell = ({ getFieldDecorator }) => {
        const {
            editing,
            dataIndex,
            title,
            record,
            index,
            children,
            ...restProps
        } = this.props;
        return (
            <td {...restProps}>
                {editing ? (
                    <Form.Item style={{ margin: 0 }}>
                        {getFieldDecorator(dataIndex + '_' + record.key + '_' + index, {
                            initialValue: record[dataIndex],
                        })(this.getInput())}
                    </Form.Item>
                ) : (
                    children
                )}
            </td>
        );
    };

    render() {
        return <EditableContext.Consumer >{this.renderCell}</EditableContext.Consumer>;
    }
}

class EditableTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data, data1, editing: false };
        this.columns = [
            {
                title: '序号',
                dataIndex: 'dataIndex',
                width: 100,
                render: (text, record, index) => <span>{index + 1}</span>
            },
            {
                title: '测量点',
                dataIndex: 'batchNo',
                width: 100,
            },

            {
                title: '最小标准值',
                width: 100,
                dataIndex: 'model',
            },
            {
                title: '最大标准值',
                width: 100,
                // allowEllipsis: true,
                dataIndex: 'department',
            },
            {
                title: '单位',
                width: 100,
                // allowEllipsis: true,
                dataIndex: 'assembleProcess',
            },
            {
                title: '实测数据-A项',
                width: 100,
                editable: true,
                dataIndex: 'testMachineProcess',
            },
            {
                title: '实测数据-B项',
                width: 100,
                editable: true,
                dataIndex: 'qualityCheckProcess',
            },
        ];
    }


    cancel = () => {
        this.setState({ editing: false });
    };

    save() {
        console.log(this.table1);
        console.log(this.table2);
        this.props.form.validateFields((error, row) => {
            if (error) {
                return;
            }
            console.log(row, 'row');
            // const newData = [...this.state.data];
            // const index = newData.findIndex(item => key === item.key);
            // if (index > -1) {
            //     const item = newData[index];
            //     newData.splice(index, 1, {
            //         ...item,
            //         ...row,
            //     });
            //     this.setState({ data: newData, editingKey: '' });
            // } else {
            //     newData.push(row);
            //     this.setState({ data: newData, editingKey: '' });
            // }
        });
    }

    edit() {
        this.setState({ editing: true });
    }

    render() {
        const components = {
            body: {
                cell: EditableCell,
            },
        };
        const columns = this.columns.map(col => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: record => ({
                    record,
                    dataIndex: col.dataIndex,
                    title: col.title,
                    editing: this.state.editing,
                    index: 0
                }),
            };
        });
        const columns1 = this.columns.map(col => {
            if (!col.editable) {
                return col;
            }
            return {
                ...col,
                onCell: record => ({
                    record,
                    dataIndex: col.dataIndex,
                    title: col.title,
                    editing: this.state.editing,
                    index: 1
                }),
            };
        });

        return (
            <div>
                <Button onClick={() => this.edit()}>编辑</Button>
                <EditableContext.Consumer>
                    {form => (
                        <Button
                            onClick={() => this.save(form)}
                            style={{ marginRight: 8 }}
                        >
                            保存
                        </Button>
                    )}
                </EditableContext.Consumer>
                <EditableContext.Provider value={this.props.form}>
                    <Table
                        components={components}
                        ref={node => (this.table1 = node)}
                        bordered
                        dataSource={this.state.data}
                        columns={columns}
                        rowClassName="editable-row"
                        pagination={false}
                    />
                </EditableContext.Provider>

                <EditableContext.Provider value={this.props.form}>
                    <Table
                        components={components}
                        ref={node => (this.table2 = node)}
                        bordered
                        dataSource={this.state.data1}
                        columns={columns1}
                        rowClassName="editable-row"
                        pagination={false}
                    />
                </EditableContext.Provider>
            </div>
        );
    }
}

export default Form.create()(withRouter(EditableTable));
